import Vue from 'vue';
import App from './App.vue';
import router from './router';
// 把按需导入的组件放在element.js，在element.js不暴露接口，在本文件直接引用，表示的是直接把模块代码在引用出执行
// import './plugins/element.js';
// 导入全局样式表
import './assets/css/global.less';
// 完整引入-最好按需导入，导入element样式文件
// import ElementUi from 'element-ui';
// import 'element-ui/lib/theme-chalk/index.css';
// Vue.use(ElementUi);

// 按需引入
// 1.1 导入样式文件---已经在babel.config.js中配置
// 1.2 借助 babel-plugin-component插件，创建的时候已经安装
// 1.3 有些图标字体在element-ui中找不到，使用第三方字体，需要导入第三方的.css文件
import './assets/fonts/iconfont.css';
// import { Form, FormItem, Button, Input, Icon, Message } from 'element-ui';
// Vue.component(Form.name, Form);
// Vue.component(FormItem.name, FormItem);
// Vue.component(Button.name, Button);
// Vue.component(Input.name, Input);
// Vue.component(Icon.name, Icon);
// // Message消息提示-组件有些特殊，需要全局定义，赋值给Vue原型属性$message
// Vue.prototype.$message = Message;
// 导入进度条包
import NProgress from 'nprogress';
// 导入进度条样式表文件
// import 'nprogress/nprogress.css';
// 发网络请求-就会调用请求拦截器，此时进度条开始，调用start()方法
// 当响应拦截器时，网络请求已经完成，调用done()方法
// 数据请求包 axios
import axios from 'axios';
// 在vue图形界面中安装运行依赖vue-table-with-tree-grid
import TreeTable from 'vue-table-with-tree-grid';
// 导入富文本编辑器包
import VueQuillEditor from 'vue-quill-editor';
// 导入富文本编辑器相关样式
// import 'quill/dist/quill.core.css'; // import styles
// import 'quill/dist/quill.snow.css'; // for snow theme
// import 'quill/dist/quill.bubble.css'; // for bubble theme
Vue.config.productionTip = false;
// 对比：使用vue-resource包获取后台数据时，设置基准路径Vue.http.options.root="接口基准地址"
// 1.全局设置请求的根路径
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/';
// 2.需要授权的 API ，必须在请求头中使用 Authorization 字段提供 token 令牌
// 2.1 在挂载到Vue原型之前，可以为axios添加一个拦截器---目的：验证请求中是否携带Token令牌，这是对请求进行预处理
// config是每个请求对象(每个路由请求)
// 在请求拦截器中展示进度条 NProgress.start()
axios.interceptors.request.use(config => {
  NProgress.start();
  // 最后必须返回config
  // console.log(config);
  // 为header属性添加一个字段Authorization
  config.headers.Authorization = sessionStorage.getItem('token');
  return config;
});
// 在响应拦截器中，停止进度条的展示-NProgress.done()
axios.interceptors.response.use(config => {
  NProgress.done();
  return config;
});
// 3.定义一个原型属性$http，所有组件都可以通过this.$http.*来发起数据请求
Vue.prototype.$http = axios;
// 在vue图形界面中安装运行依赖vue-table-with-tree-grid
// import TreeTable from 'vue-table-with-tree-grid';
// 注册为全局可用的组件
Vue.component('tree-table', TreeTable);

// 创建一个全局过滤器，格式化时间
Vue.filter('dateFormat', function(str) {
  const date = new Date(str);
  const year = date.getFullYear();
  // 使用String 的padStart方法，声明月、日、时、分、秒为2位，不足10的在前面补0
  const month = (date.getMonth() + 1 + '').padStart(2, '0');
  const day = (date.getDate() + '').padStart(2, '0');
  const hour = (date.getHours() + '').padStart(2, '0');
  const min = (date.getMinutes() + '').padStart(2, '0');
  const sec = (date.getSeconds() + '').padStart(2, '0');
  return `${year}-${month}-${day} ${hour}:${min}:${sec}`;
});
// // 导入富文本编辑器包
// import VueQuillEditor from 'vue-quill-editor';
// // 导入富文本编辑器相关样式
// import 'quill/dist/quill.core.css'; // import styles
// import 'quill/dist/quill.snow.css'; // for snow theme
// import 'quill/dist/quill.bubble.css'; // for bubble theme
// 将富文本编辑器注册为全局可用的组件
Vue.use(VueQuillEditor);
new Vue({
  router,
  render: h => h(App)
  // 在vm实例对象中没有声明el节点，所以下面用￥mount手动挂载了
  // $mount 用于Vue在实例化时如果没有收到el选项，则它属于“未挂载”状态，没有关联的DOM元素。可以使用$mount手动挂载一个未挂载的实例
}).$mount('#app');
